<template>
	<view class="pay">
		<view class="text-box" v-for="(item,index) in paytabs" :class="item.isActive?'active':''" :key="item.id"
			@click="click(item.id)">
			{{item.value}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "hjx-pays",
		data() {
			return {

			};
		},
		props: ['paytabs'],
		methods: {
			click(activeId) {
				this.$emit("paytabsChange", activeId);
			}
		}
	}
</script>

<style lang="scss">
	.pay {
		height: 100rpx;
		display: flex;

		.text-box {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 2rpx solid #efefef;

			&.active {
				border-bottom: 5rpx solid #ddaacc;
				color: #ddaacc;
			}
		}
	}
</style>